<template lang="html">
  <div class="login">
    <v-header>
      <h1 slot="title">登录</h1>
    </v-header>
    <section>
      <mt-field class="login-field"
       label="手机"
        placeholder="请输入手机号"
        type = "text"
        v-model = "account"
        :readonly = '!toggle'
        :disableClear = '!toggle'
        >
        <mt-button
          plain style="margin:0 10px"
          @click="phone"
          >
          {{buttonName}}
        </mt-button>
      </mt-field>

      <mt-field class="login-field"
       label="验证码"
       placeholder="验证码"
       type="password"
       v-model="password"
       :readonly='!toggle'
       :disableClear = '!toggle'
        ></mt-field>
    </section>
    <mt-button
     type="primary" size="large" class="login-btn"
     @click="login">登录</mt-button>

  </div>
</template>

<script>
import Header from '@/common/_header.vue'
import { Toast } from 'mint-ui'
export default {
  components:{
    'v-header':Header
  },
  data(){
    return {
      p:'',
      account:'',
      password:'',
      buttonName:'获取验证码',
      isSend:false,
      sendTime:60,
      toggle:!this.$store.state.token
    }
  },
  methods:{
    // 登录按钮
    login(){
      if(this.account!=="" && this.password!=="") {
        this.$api({
          method: 'get',
          url: `/open/checkCode/${this.account}/${this.password}`,
        }).then((response) => {
          if(response.data.data.success)
          {
            Toast(response.data.data.message);
            this.$store.commit('CHANGE_TOKEN',response.data.data.Authorization);
            localStorage.setItem('token',response.data.data.Authorization);
            this.toggle = false;
            this.$router.replace({
              path: 'user'
            })
          }
          else{
            Toast(response.data.data.message);
          }
        })
      }else {
        Toast('账号密码不能为空');
      }
    },

    phone(){
      if(this.isSend)
      {
        this.buttonName = this.sendTime + 's';
        this.sendTime--;
      }
      else{
        if(this.account!=="") {
          this.isSend = true;
          this.$api({
            method: 'get',
            url: '/open/sendCode/'+ this.account
          }).then((response) => {
            if(response.data.data.success)
            {
              Toast(response.data.data.message);
              localStorage.setItem('phone', this.account);
            }
            else{
              Toast(response.data.data.message);
            }

          })
        }else {
          Toast('账号不能为空');
        }
      }
      if(this.sendTime > 0)
      {
        setTimeout(this.phone,1000);
      }
      else{
        this.isSend = false;
        this.sendTime = 60;
        this.buttonName = '获取验证码';
      }
    },

    //退出登录按钮
    logout(){
      Toast('退出登录成功,清除token');
      this.$store.commit('CHANGE_TOKEN',0);
      this.toggle = true;
      this.account = '';
      this.password = '';
    }
  }
}

</script>

<style lang="less" scoped>
.login {
  >section {
    .login-field{
      margin: 4px;
    }

    .tip {
      padding: 6vw 3vw;
      color:rgb(224, 145, 71);
      letter-spacing: 2px;
      font-size: 16px;
    }
  }

  .login-btn {
      margin: 15px auto;
      width: 80%;
    }
}
</style>
